<template>
  <div class="container">
    <div class="wk_page" id="wk_page">
      <!-- <div class="page-header">
			<span class="title-item">指令编辑</span>
			<a-button class="add-btn" style="margin-top: 5px;">删除指令</a-button>
      </div>-->
      <div class="page-header">
        <a-row>
          <a-col :span="5">
            <span class="title-item">指令编辑</span>
          </a-col>
          <a-col :span="18" style="margin-left: 3%;">
            <a-button class="add-btn" style="margin-top: 5px;" @click="delInstructions">删除指令</a-button>
          </a-col>
        </a-row>
      </div>
      <div class="page-body">
        <div class="page-body" style="display: flex;">
          <!-- 左边的表单 -->
          <a-form layout="inline" style="width: 80%;" :from="formOne">
            <a-row>
              <a-col :span="10" :offset="2">
                <a-form-item class="form-item" label="指令标题" labelAlign="right">
                  <a-input
                    v-model="formOne.title"
                    class="inline-input"
                    v-decorator="['title',{rules:[]}]"
                    autocomplete="off"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="9" :offset="1">
                <a-form-item class="form-item" label="主题分类" labelAlign="right">
                  <a-select class="select-item" v-model="formOne.themeType" allow-clear>
                    <a-select-option value="1">水站指令管理</a-select-option>
                    <a-select-option value="2">空气指令管理</a-select-option>
                    <a-select-option value="3">污染指令管理</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="margin-left: -39px; width: 102%;">
              <a-col :span="23" :offset="1">
                <a-form-item class="form-item" label="指令内容" labelAlign="right">
                  <a-textarea v-model="formOne.content" :rows="8" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="21" :offset="1">
                <a-button class="add-btn" v-if="this.isSelect>= 0" @click="handleSubmitTwo">更新原指令</a-button>
                <a-button
                  v-else
                  type="submit"
                  class="add-btn"
                  @click="handleSubmitOne"
                  style="background-color: #3E6933;"
                >作为新指令</a-button>
              </a-col>
            </a-row>
          </a-form>
          <!-- 右侧指令详情 -->
          <a-form layout="inline" :form="form" style="width: 33%;">
            <div style="height:750px;width:90%;position: relative;">
              <div style="border-left:1px solid #00ffdc;padding-left: 23px;height:90%;">
                <div class="waterfall-wrapper">
                  <div
                    v-for="(item,index) in list"
                    :key="index"
                    @click="selectFn(index)"
                    :class="index==isSelect? 'select-box':'wk_a'"
                  >
                    <div
                      style="display: flex; flex-wrap: wrap;padding-bottom: 20px;border: 1px;margin: 10px;"
                    >
                      <div style="width: 150px;margin-top: 10px;margin-left: 15px;">
                        <span
                          :class="isSelect == index ? 'wk_left': 'wk_leftL'"
                          style="font-size: 20px;"
                        >{{item.title}}</span>
                      </div>
                      <div style="width: 150px;margin-top: 15px;margin-left:10px;font-size: 14px;">
                        <span
                          :class="isSelect == index ? 'wk_leftw': 'wk_leftwL'"
                          style="font-size: 15px;"
                        >{{item.themeType}}</span>
                      </div>
                      <!-- <div class="thead-item" style="margin-top: 10px;margin-right: 10px;">
                        <a-radio-group @change="onCheckboxChange"></a-radio-group>
                      </div>-->
                      <div
                        :class="isSelect == index ? 'wk_right': 'wk_rightL'"
                        class="thead-item"
                        style="margin-left: 10px;margin-right: 10px;font-size: 20px; flex-wrap: wrap;"
                      >
                        <p>{{item.content}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="page-box">
                  <a-pagination
                    :show-total="total => `共 ${total}条记录`"
                    v-model="page.current"
                    :total="total"
                    :defaultPageSize="page.size"
                    :item-render="itemRender"
                    size="small"
                    @change="pagechangeFn"
                  />
                </div>
              </div>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "index",

  data() {
    return {
      //新建指令
      list: [],
      page: {
        current: 1,
        size: 6,
      },

      form: this.$form.createForm(this, {
        name: "horizontal_login",
      }),
      moment,
      isSelect: -1,
      form: this.$form.createForm(this, {
        name: "horizontal_login",
      }),
      formOne: {
        id: "",
        title: "",
        content: "",
        themeType: "",
      },
      total: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.form.validateFields();
    });
  },
  methods: {
    /* 点击 */
    selectFn(index) {
      var that = this;
      console.log(index);
      let isList = this.list[index];
      if (that.isSelect >= 0) {
        if (index == that.isSelect) {
          that.isSelect = -1;
          that.formOne.title = "";
          that.formOne.content = "";
          that.formOne.themeType = "";
        } else {
          that.isSelect = index;
          that.formOne.title = isList.title;
          that.formOne.content = isList.content;
          that.formOne.themeType = isList.themeType;
        }
      } else {
        that.isSelect = index;
        that.formOne.title = isList.title;
        that.formOne.content = isList.content;
        that.formOne.themeType = isList.themeType;
      }
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.handleSubmit();
    },
    //获取数据
    handleSubmitOne(e) {
      console.log(this.formOne);
      if (
        this.formOne.title !== "" &&
        this.formOne.content !== "" &&
        this.formOne.themeType !== ""
      ) {
        this.$api.Api_instruction(this.formOne).then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.formOne = {};
            this.$message.info("新建指令成功");
            this.handleSubmit();
          }
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },
    //更新指令
    handleSubmitTwo(e) {
      let index = this.isSelect;
      let id = this.list[index].id;
      this.formOne.id = id;
      let formTwo = this.formOne;
      this.$api.Api_editInstruction(formTwo).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.list[index] = res.data.data;
          this.$message.info("更新指令成功");
          this.handleSubmit();
        }
      });
    },
    //右侧指令详情
    handleSubmit() {
      this.$api.Api_instructionFindByPage(this.page).then((res) => {
        var data = res.data.data;
        // console.log(data);
        for (let index in data) {
          data[index].isselect = false;
        }
        this.list = data;
        // console.log(data);
        this.total = res.data.total;
      });
    },
    // onCheckboxChange(e) {
    //   console.log(e);
    //   var index = this.isSelect;
    //   var checked = e.target.checked;
    //   var list = this.list;
    //   var data = [];
    //   var formOne = this.formOne;
    //   if (checked == true) {
    //     data = list[index];
    //     formOne.title = data.title;
    //     formOne.content = data.content;
    //     formOne.themeType = data.themeType;
    //     formOne.id = data.id;
    //   } else {
    //     formOne.title = "";
    //     formOne.content = "";
    //     formOne.themeType = "";
    //     formOne.id = "";
    //   }
    // },
    //删除按钮
    delInstructions() {
      let index = this.isSelect;
      let id = this.list[index].id;
      this.$api.Api_delete(id).then((res) => {
        console.log(res);
        if (res.data.data == true) {
          this.$message.info("删除指令成功");
          this.handleSubmit();
        }
      });
    },
  },
  mounted() {
    this.handleSubmit();
  },
};
</script>
<style>
/* Form表单label */
#wk_page .ant-form-item-label > label::after {
  content: "";
}
</style>
<style scoped>
.select-box {
  background: linear-gradient(#1e7151, #246369);
  background-color: rgba(31, 111, 82);
  border-radius: 9px;
}
.wk_a {
  background-color: rgba(26, 55, 50);
  border-radius: 9px;
}
.wk_left {
  color: #b7c939;
}
.wk_leftw {
  color: #b7c939;
}
.wk_leftL {
  color: #bebebe;
}
.wk_leftwL {
  color: #bebebe;
}
.wk_right {
  color: #37ddc0;
}
.wk_rightL {
  color: #207064;
}
.wk_rightL .ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-btn.active {
  text-decoration: none;
  background: none;
}
::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
</style>
<style scoped src="../../../../assets/style/pollution.css"></style>
<style scoped lang="scss">
::v-deep .container {
  margin-top: 11px;
}

::v-deep .page-header {
  margin-left: 25px;
  margin-top: 30px;
}

::v-deep .title-item {
  font-size: 24px;
  color: #37ddc0;
  width: 100%;
}

::v-deep .ant-form {
  margin-top: 30px;
}

::v-deep .ant-form-item {
  width: 100%;
}

::v-deep .ant-form-item-label {
  min-width: 15%;
}

::v-deep .ant-form-item-label label {
  color: #9fb043;
  font-size: 18px;
}

::v-deep .ant-form-item-control-wrapper {
  width: 75%;
}

::v-deep .ant-form-item-children input {
  background-color: #29423f;
  border: none;
  color: #bebebe;
}

::v-deep .touru-date {
  width: 100%;
}

::v-deep .ant-row {
  margin-top: 15px;
}

::v-deep .ant-row:first-child {
  margin-top: 0px;
}

::v-deep .fuze-management {
  width: 100%;
}

::v-deep .fuze-management > div,
::v-deep .ant-input,
::v-deep .exception > div,
::v-deep .exception-half > div,
::v-deep .delete-btn {
  background-color: #29423f;
  color: #bebebe;
  border: none;
}

::v-deep .exception {
  width: 35% !important;
  margin-right: 20px;
}

::v-deep .exception-half {
  width: 16% !important;
  margin-right: 16px;
}

::v-deep .delete-btn {
  width: 23% !important;
}

::v-deep .add-btn {
  float: right;
  margin-right: 30px;
  background-color: #2c6a5f;
  border: none;
  font-weight: 700;
}

::v-deep .exception-item {
  margin-top: 15px;
}

::v-deep .exception-item:first-child {
  margin-top: 0px;
}

::v-deep .dottedline {
  border-bottom: 2px dotted #2c6a5f;
  margin: 50px 0px 50px 60px;
  height: 1px;
}
::v-deep .waterfall-wrapper {
  overflow: hidden;
  height: 97%;
}
::v-deep .scroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 2rem; //预留foot组件
  overflow: hidden;
}
</style>
